<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="tool">
        <input value="123" id="input">
    </div>
    <div id="app">        
    </div>
    <script type="module">
        import {dayseq,h} from "../demo/h.js"
        let obj={
        name:"henq",
        num:12345678987654321.12345678987654321,
        num2:"12345678987654321.12345678987654321",
        love:["台球","象棋"],
        friends:[
            {name:"喵喵",age:24},
            {name:"丽丽",age:23},
        ]  
        }
        let state=new Proxy(obj,{
            get(target,key){
                return Reflect.get(target,key);
            },
            set(target,key,value){
                console.warn("proxy",key,value)
                if(value!==target[key]){
                    Reflect.set(target,key,value);
                    flush(target,key);
                }
                return true;
            }
        })
        const weakMap=new WeakMap();
        let h1=h("h1",obj.name);
        h1._q={
            data:state,
            k:"name",            
            update(){
                h1.innerHTML=state["name"];
            }           
        }
        console.warn("obj",obj)
        weakMap.set(state,h1);
        const flush=(target,key)=>{
            console.warn("flush")
            let dom= weakMap.get(state);
            dom._q.update();
        }
        window.obj=obj;
        app.append(h1);
        input.addEventListener("input",(e)=>{
            console.warn(e.target.value);
            state.name=e.target.value
            // state.name="e.target.value"
        })

    </script>
</body>
</html>